<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>音乐播放器</title>
    <style>
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        .player-cover img {
            width: 100%;
            height: auto;
            border-radius: 50%;
            transition: transform 0.5s ease-in-out;
        }

        .player-cover img.playing {
            animation: rotate 10s linear infinite;
        }
    </style>
</head>
<body>
    <div class="player">
        <div class="player-cover">
            <img id="cover-image" src="image\OIP-C.jpg" alt="封面">
        </div>
        <div class="player-info">
            <h1 id="song-title">如果可以</h1>
            <p id="song-author">作者：韦小贤</p>
        </div>
        <div class="player-controls">
            <button class="toggle-playlist"><i class="fa fa-list"></i></button>
            <div class="controls">
                <button id="prev-song"><i class="fa fa-step-backward"></i></button>
                <button id="play-pause"><i class="fa fa-play-circle"></i></button>
                <button id="next-song"><i class="fa fa-step-forward"></i></button>
            </div>
            <div class="progress-bar">
                <div class="progress"></div>
            </div>
            <div class="time" id="current-time">00:00 / 04:03</div>
        </div>
    </div>

    <div class="playlist" style="display: none;">
        <h2>播放列表</h2>
        <ul id="playlist-list">
            <li data-src="https://music.90svip.cn/api.php?get=url&type=wy&id=2674443509&sign=711933834042614b1a9eed83cb0311a3&t=1748271008" data-img="image/20170804090118_BTxQA.jpeg">像雨天像晴天 - 韦小贤</li>
            <li data-src="https://music.90svip.cn/api.php?get=url&type=wy&id=574921549&sign=6a9b05ef2baa3931d34c1561ea65adec&t=1748271372" data-img="image/R-C (1).jpg">怪咖 - 韦小贤</li>
            <li data-src="https://music.90svip.cn/api.php?get=url&type=wy&id=65766&sign=764efefb76d4682769e8ac01306a29ef&t=1748271418" data-img="image/20170804090118_BTxQA.jpeg">富士山下 - 韦小贤</li>
            <li data-src="https://music.90svip.cn/api.php?get=url&type=wy&id=1405283464&sign=79c26bf713468a0f1dcff76f5fd20337&t=1748271439" data-img="image\t014133e0b01d03fb84.jpg">句号 - 韦小贤</li>
            <!-- 添加更多歌曲 -->
        </ul>
    </div>

    <audio id="audio-player" src="https://music.90svip.cn/api.php?get=url&type=wy&id=1890530891&sign=ee68f92d14b2665530a62c9136939811&t=1748271824"></audio>

    <script>
        const audioPlayer = document.getElementById('audio-player');
        const playPauseButton = document.getElementById('play-pause');
        const prevSongButton = document.getElementById('prev-song');
        const nextSongButton = document.getElementById('next-song');
        const progressBar = document.querySelector('.progress-bar');
        const progress = document.querySelector('.progress');
        const currentTimeDisplay = document.getElementById('current-time');
        const songTitle = document.getElementById('song-title');
        const songAuthor = document.getElementById('song-author');
        const playlistList = document.getElementById('playlist-list');
        const togglePlaylistButton = document.querySelector('.toggle-playlist');
        const playlist = document.querySelector('.playlist');
        const playerCover = document.getElementById('cover-image');

        let isPlaying = false;
        let duration = 0;
        let currentTimeValue = 0;
        let isDragging = false;

        function updateProgress() {
            if (!isDragging && isPlaying) {
                currentTimeValue = Math.min(audioPlayer.currentTime * 1000, duration);
                const width = (currentTimeValue / duration) * 100;
                progress.style.width = width + '%';
                currentTimeDisplay.textContent = formatTime(audioPlayer.currentTime) + ' / ' + formatTime(audioPlayer.duration);
            }
        }

        function formatTime(seconds) {
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = Math.floor(seconds % 60);
            return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
        }

        playPauseButton.addEventListener('click', () => {
            if (!isPlaying) {
                audioPlayer.play();
                isPlaying = true;
                playPauseButton.querySelector('i').className = 'fa fa-pause-circle';
                playerCover.classList.add('playing'); // 添加旋转动画
            } else {
                audioPlayer.pause();
                isPlaying = false;
                playPauseButton.querySelector('i').className = 'fa fa-play-circle';
                playerCover.classList.remove('playing'); // 移除旋转动画
            }
        });

        prevSongButton.addEventListener('click', () => {
            const currentSongIndex = Array.from(playlistList.children).findIndex(li => li.dataset.src === audioPlayer.src);
            const prevSongIndex = (currentSongIndex - 1 + playlistList.children.length) % playlistList.children.length;
            audioPlayer.src = playlistList.children[prevSongIndex].dataset.src;
            audioPlayer.load();
            audioPlayer.play();
            updateSongInfo();
        });

        nextSongButton.addEventListener('click', () => {
            const currentSongIndex = Array.from(playlistList.children).findIndex(li => li.dataset.src === audioPlayer.src);
            const nextSongIndex = (currentSongIndex + 1) % playlistList.children.length;
            audioPlayer.src = playlistList.children[nextSongIndex].dataset.src;
            audioPlayer.load();
            audioPlayer.play();
            updateSongInfo();
        });

        progressBar.addEventListener('click', (event) => {
            const rect = progressBar.getBoundingClientRect();
            const clickX = event.clientX - rect.left;
            const newTime = (clickX / rect.width) * duration;
            audioPlayer.currentTime = newTime / 1000;
            isDragging = true;
            updateProgress();
            isDragging = false;
        });

        function updateSongInfo() {
            const currentSong = document.querySelector('li[data-src="' + audioPlayer.src + '"]');
            if (currentSong) {
                songTitle.textContent = currentSong.textContent.split('-')[0].trim();
                songAuthor.textContent = '作者：' + currentSong.textContent.split('-')[1].trim();
                playerCover.src = currentSong.dataset.img; // 更新封面图片
            } else {
                console.error('Current song not found:', audioPlayer.src);
            }
        }

        audioPlayer.addEventListener('loadedmetadata', () => {
            duration = audioPlayer.duration * 1000;
            currentTimeDisplay.textContent = '00:00 / ' + formatTime(audioPlayer.duration);
        });

        audioPlayer.addEventListener('timeupdate', () => {
            updateProgress();
        });

        audioPlayer.addEventListener('ended', () => {
            isPlaying = false;
            playPauseButton.querySelector('i').className = 'fa fa-play-circle';
        });

        playlistList.addEventListener('click', (event) => {
            if (event.target.tagName === 'LI') {
                audioPlayer.src = event.target.dataset.src;
                audioPlayer.load();
                audioPlayer.play();
                updateSongInfo();
            }
        });

        togglePlaylistButton.addEventListener('click', () => {
            if (playlist.style.display === 'none' || playlist.style.display === '') {
                playlist.style.display = 'block';
            } else {
                playlist.style.display = 'none';
            }
        });

        // 初始化时更新歌曲信息
        updateSongInfo();
    </script>
</body>
</html>